import React from 'react'
import injectSheet from 'react-jss'
import styles from './styles'
import https from '@/assets/https'
import { Layout, Form, Input, Select, Button, } from 'antd'
const { Content, } = Layout
const FormItem = Form.Item
const { Option, } = Select
const { TextArea, } = Input

class TopicCreate extends React.Component {
  state = {
    title: '',
    description: '',
    content: '',
    typeId: 0,
    options: []
  }

  inputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    })
  }

  typeChange = (value) => {
    this.setState({
      typeId: value,
    })
  }

  submit = () => {
    const data = {
      title: this.state.title,
      description: this.state.description,
      content: this.state.content,
      typeId: this.state.typeId,
    }
    https('/topic', {
      method: 'POST',
      body: JSON.stringify(data)
    })
      .then(result => {
        console.log(result)
      })
  }

  componentWillMount() {
    https('/topicType', {})
      .then(result => {
        this.setState({
          options: result.data.map(item => {
            return {
              id: item.typeId,
              value: item.value,
            }
          })
        })
      })
  }

  render() {
    const { classes } = this.props
    const formItemLayout = {
      labelCol: {
        xs: { span: 24, },
        sm: { span: 1, },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      }
    }
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 1,
        },
      },
    }

    return (
      <Layout>
        <Content className={classes.Content}>
          <h1>发布文章</h1>
          <Form>
            <FormItem
              {...formItemLayout}
              label="标题">
              <Input
                name="title"
                value={this.state.title}
                placeholder="请输入标题"
                onChange={this.inputChange} />
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="描述">
              <Input
                name="description"
                value={this.state.description}
                placeholder="请输入描述"
                onChange={this.inputChange} />
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="内容">
              <TextArea
                style={{height: '300px', fontSize: '16px', }}
                name="content"
                value={this.state.content}
                onChange={this.inputChange}
                placeholder="请输入内容">
              </TextArea>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="类型">
              <Select
                name="typeId"
                value={this.state.typeId}
                onChange={this.typeChange}>
                {
                  this.state.options.map((item, index) => (
                    <Option value={item.id} key={index}>
                      {item.value}
                    </Option>
                  ))
                }
              </Select>
            </FormItem>
            <FormItem
              {...tailFormItemLayout}>
              <Button
                className={classes.SubmitBtn}
                onClick={this.submit}>发布</Button>
            </FormItem>
          </Form>
        </Content>
      </Layout>
    )
  }
}

export default injectSheet(styles)(TopicCreate)
